<template>
	<div>
		<div class="storeBox" ref="container">
			<div class="storeBox-box" v-for="(item, index) in storeList" :key="index" @click.stop="checked(item)">
				<div class="store-img"><img :src="baseUrl+item.store_image" lazy-load="true" /></div>
				<div class="store-cent-left">
					<div class="store-name">{{ item.store_name }}</div>
					<div class="store-address line1">
						{{ item.store_address}}
					</div>
				</div>
				<div class="row-right">
					<div>
						<!-- #ifdef H5 -->
						<a class="store-phone acea-row row-center-wrapper" :href="'tel:' + item.store_tel">
						<u-icon name="phone" color="#ff0000" size="38"></u-icon>
						</a>
						<!-- #endif -->
						<!-- #ifdef MP || APP-PLUS -->
						<view class="store-phone acea-row row-center-wrapper" @click.stop="call(item.store_tel)">
							<u-icon name="phone" color="#ff0000" size="38"></u-icon>
						</view>
						<!-- #endif -->
					</div>
					<div class="store-distance" @click.stop="showMaoLocation(item)">
						<span class="addressTxt" v-if="item.range">{{ item.range }}Km</span>
						<span class="addressTxt" v-else>查看地图</span>
						<span class="iconfont icon-youjian">
							<u-icon name="map-fill" color="#666" size="28"></u-icon>
						</span>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	const LONGITUDE = "user_longitude";
	const LATITUDE = "user_latitude";
	const MAPKEY = "mapKey";
	export default {
		name: "storeList",
		data() {
			return {
				baseUrl: this.config.baseUrl,
				page: 1,
				limit: 20,
				loaded: false,
				loading: false,
				storeList: [],
				system_store: {},
				user_latitude: 0,
				user_longitude: 0,
				store_ids:''
			};
		},
		onLoad(options) {
			this.store_ids = options.ids || ''
			try {
				this.user_latitude = uni.getStorageSync('user_latitude');
				this.user_longitude = uni.getStorageSync('user_longitude');
			} catch (e) {}
		},
		mounted() {
			if (this.user_latitude && this.user_longitude) {
				this.getList();
			} else {
				this.selfLocation();
			}
		},
		methods: {
			call(phone) {
				uni.makePhoneCall({
					phoneNumber: phone,
				});
			},
			selfLocation() {
				let self = this
				// #ifdef H5
				if (self.app.isWechat()) {
					this.getWxLocation()
				} else {
					// #endif	
					uni.getLocation({
						type: 'wgs84',
						success: (res) => {
							try {
								this.user_latitude = res.latitude;
								this.user_longitude = res.longitude;
								uni.setStorageSync('user_latitude', res.latitude);
								uni.setStorageSync('user_longitude', res.longitude);
							} catch {}
							self.getList();
						},
						complete: function() {
							self.getList();
						}
					});
					// #ifdef H5	
				}
				// #endif
			},
			getWxLocation(){
				let _this = this;
				var url = location.href.split('#')[0];
				this.$u.post('/publics/api.index/getWxShare', {
					url: url,
				}).then(res => {
					uni.hideLoading();
					var shareConfig = res.data;
					_this.token = res.data.token
					_this.$wxjs.config({
						debug: false,
						appId: res.data.wxShare.appId,
						timestamp: res.data.wxShare.timestamp,
						nonceStr: res.data.wxShare.nonceStr,
						signature: res.data.wxShare.signature,
						jsApiList: ['getLocation','openLocation']})
						_this.$wxjs.ready(() => {
							_this.$wxjs.getLocation({
								type: 'gcj02',
								success: (res) => {
									_this.tips(res.latitude)
									uni.setStorageSync('user_latitude', res.latitude);
									uni.setStorageSync('user_longitude', res.longitude);
								},
								complete: () => {
									_this.getList()
								},
							});
						})
				}).catch(err => {
					console.log(err);
				})
			},
			showMaoLocation(e) {
				let self = this;

				uni.openLocation({
					latitude: Number(e.latitude),
					longitude: Number(e.longitude),
					name: e.store_name,
					address: `${e.store_address}`,
					success: function() {
						Number
					}
				});
	
			},
			// 选中门店
			checked(e) {

				uni.$emit("handClick", {
					address: e
				});
				uni.navigateBack();
			},
			// 获取门店列表数据
			getList: function() {
				if (this.loading || this.loaded) return;
				this.loading = true;
				let data = {
					latitude: this.user_latitude || "", //纬度
					longitude: this.user_longitude || "", //经度
					page: this.page,
					limit: this.limit,
					ids:this.store_ids
				};
				this.$u.get('shop/api.store/lst', data).then(res => {
					this.loading = false;
					this.loaded = res.data.data.length < this.limit;
					this.storeList.push.apply(this.storeList, res.data.data);
					this.page = this.page + 1;
				})
				.catch(err => {
					this.tips(err)
				});
			}
		},
		onReachBottom() {
			this.getList();
		}
	};
</script>

<style lang="scss">
	.geoPage {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		z-index: 10000;
	}

	.storeBox {
		width: 100%;
		background-color: #fff;
		padding: 0 30rpx;
	}

	.storeBox-box {
		width: 100%;
		height: auto;
		display: flex;
		align-items: center;
		padding: 23rpx 0;
		justify-content: space-between;
		border-bottom: 1px solid #eee;
	}

	.store-cent {
		display: flex;
		align-items: center;
		width: 80%;
	}

	.store-cent-left {
		width: 45%;
	}

	.store-img {
		width: 120rpx;
		height: 120rpx;
		border-radius: 6rpx;
		margin-right: 22rpx;
	}

	.store-img img {
		width: 100%;
		height: 100%;
	}

	.store-name {
		color: #282828;
		font-size: 30rpx;
		margin-bottom: 22rpx;
		font-weight: 800;
	}

	.store-address {
		color: #666666;
		font-size: 24rpx;
	}

	.store-phone {
		width: 50rpx;
		height: 50rpx;
		color: #fff;
		border-radius: 50%;
		background-color: var(--view-theme);
		margin-bottom: 22rpx;
		text-decoration: none;

		.icon-dadianhua01 {
			font-size: 22rpx;
		}
	}

	.store-distance {
		font-size: 22rpx;
		color: var(--view-theme);
	}

	.iconfont {
		font-size: 20rpx;
	}

	.row-right {
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 33.5%;
	}
</style>
